import GxlTableRow from "./Row";
import "./index.css";
import React from "react";
import { ScrollSync, ScrollSyncPane } from "react-scroll-sync";
import GxlTableHeader from "./Header";
import GxlTableLefter from "./Lefter";
import GxlSelectedArea from "../GxlSelectedArea";
import { observer, inject } from "mobx-react";
@inject("sheetStore")
@observer
class GxlTable extends React.Component {
  constructor(props) {
    super(props);
    this.gxlTableRowsDom = undefined;
    this.state = {
      lefterRowHeight: "2rem",
      left: 0,
      top: 0,
      currentSheetIndex: 0,
      scrollXWidth: 500,
      scrollYHeight: 0,
      scrollXContentWidth: 1000,
      scrollYContentHeight: 0,
      rowsWidth: 0
    };
  }
  componentDidMount() {
    var rect = this.gxlTableRowsDom.getBoundingClientRect();
    const scaleX = this.gxlTableRowsDom.scrollWidth / rect.width
    const scrollXContentWidth = this.state.scrollXWidth * scaleX
    this.setState({
      rowsWidth: this.gxlTableRowsDom.scrollWidth,
      left: rect.left,
      top: rect.top,
      scrollXContentWidth,
      scrollYContentHeight: this.gxlTableRowsDom.scrollHeight,
      scrollYHeight: rect.height
    });
  }
  wheelRows(e) {
    if (!this.gxlTableRowsDom) {
      return
    }
    const scrollOffset = e.deltaY > 0 ? 15 : -15
    this.gxlTableRowsDom.scrollBy(e.deltaX, scrollOffset)
  }
  buildRows() {
    const { sheetStore } = this.props
    const currentSheetIndex = sheetStore.currentSheetIndex
    const currentSheet = sheetStore.getCurrentSheet()
    const { top, left, rowsWidth } = this.state
    let i = 0;
    const array = [];
    for (; i < currentSheet.defaultShowRowCount; i++) {
      const rowDom = (
        <GxlTableRow
          key={`row_${i}`}
          tableTop={top}
          tableLeft={left}
          sheet={currentSheetIndex}
          row={i}
          data={currentSheet.rows[i]}
          cols={currentSheet.defaultShowCellCount}
          style={{ width: rowsWidth }}
        />
      );
      array.push(rowDom);
    }
    return array;
  }
  render() {
    const { sheetStore } = this.props
    const { scrollXWidth, scrollXContentWidth, scrollYHeight, scrollYContentHeight, rowsWidth } = this.state
    const currentSheetIndex = sheetStore.currentSheetIndex
    const currentSheet = sheetStore.getCurrentSheet()
    currentSheet.setFixedRow(5)
    currentSheet.setFixedCell(3)
    return (
      <ScrollSync>
        <div className="gxl-table">
          
          <GxlTableHeader cols={currentSheet.defaultShowCellCount} />
          <GxlTableLefter sheet={currentSheet} tableTop={this.state.top} currentSheetIndex={currentSheetIndex} />
          <ScrollSyncPane group={["v", "h"]}>
            <div
              className="gxl-table-rows"
              ref={(refDom) => {
                this.gxlTableRowsDom = refDom;
              }}
              onWheel={(e) => this.wheelRows(e)}
            >
              {this.buildRows()}
              <GxlSelectedArea/>
            </div>
          </ScrollSyncPane>
          <div className="gxl-table-righter">
            <ScrollSyncPane group="v">
              <div className="gxl-table-scroll-y" style={{ height: scrollYHeight }}>
                <div className="scroll-y-content" style={{ height: scrollYContentHeight }}></div>
              </div>
            </ScrollSyncPane>
          </div>
          <div className="gxl-table-footer">
            <div className="gxl-table-sheet-tabs">
            </div>
            <ScrollSyncPane group="h">
              <div className="gxl-table-scroll-x" style={{ width: scrollXWidth }}>
                <div className="scroll-x-content" style={{ width: scrollXContentWidth }}></div>
              </div>
            </ScrollSyncPane>
          </div>
        </div>
      </ScrollSync>
    );
  }
}

export default GxlTable;